import React from "react";
import { TouchableOpacity, StatusBar, Linking } from "react-native";
import { WebView } from "react-native-webview";
import Markdown from "react-native-showdown";
import styled from "styled-components";
import { Ionicons } from "@expo/vector-icons";

export default class SectionScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    // console.log(navigation)
    return {
      header: null
    };
  };

  componentDidMount() {
    StatusBar.setBarStyle("light-content", true);
  }

  componentWillUnmount() {
    StatusBar.setBarStyle("dark-content", true);
  }

  render() {
    const { navigation } = this.props;
    const { image, logo, subtitle, title, caption } = navigation.getParam(
      "section"
    );

    // console.log('content', content)

    return (
      <Container>
        <StatusBar hidden />
        <Cover>
          <Image source={image} />
          <Wrapper>
            <Logo source={logo} />
            <Subtitle>{subtitle}</Subtitle>
          </Wrapper>
          <Title>{title}</Title>
          <Caption>{caption}</Caption>
        </Cover>

        <TouchableOpacity
          onPress={() => this.props.navigation.goBack()}
          style={{ position: "absolute", top: 20, right: 20 }}
        >
          <CloseView>
            <Ionicons
              name="ios-close"
              size={36}
              color="#4775f2"
              style={{ marginTop: -2 }}
            />
          </CloseView>
        </TouchableOpacity>

        <Content>
          {/* <WebView
            ref="webview"
            // source={{ html: content + htmlStyles }}
            source={{
              uri:
                'http://news.cctv.com/2019/12/28/ARTIJfX9DIpZbHR4KqqXP0Ej191228.shtml'
            }}
            scalesPageToFit={false}
            scrollEnabled={false}
            onNavigationStateChange={event => {
              if (event.url !== 'about:blank') {
                this.refs.webview.stopLoading()
                Linking.openURL(event.url)
              }
            }}
          /> */}

          {/* <AppWebView
            text="关于我们"
            uri="http://news.cctv.com/2019/12/28/ARTIJfX9DIpZbHR4KqqXP0Ej191228.shtml"
          /> */}
          {/* <Markdown
            body={content}
            pureCSS={htmlStyles}
            scalesPageToFit={false}
            scrollEnabled={false}
          /> */}
        </Content>
      </Container>
    );
  }
}

const Text = styled.Text``;

const Container = styled.View`
  flex: 1;
`;
const Cover = styled.View`
  height: 375px;
`;

const Image = styled.Image`
  width: 100%;
  height: 100%;
  position: absolute;
`;

const Title = styled.Text`
  font-size: 24px;
  color: #fff;
  /* font-weight: bold; */
  font-weight: 700;
  position: absolute;
  top: 78px;
  left: 20px;
  width: 170px;
`;

const Caption = styled.Text`
  font-size: 17px;
  color: #fff;
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 300px;
`;
const CloseView = styled.View`
  width: 32px;
  height: 32px;
  background-color: #fff;
  border-radius: 16px;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
`;
const Wrapper = styled.View`
  flex-direction: row;
  position: absolute;
  top: 40px;
  left: 20px;
  align-items: center;
`;

const Logo = styled.Image`
  width: 24px;
  height: 24px;
`;

const Subtitle = styled.Text`
  font-size: 15px;
  font-weight: 500;
  margin-left: 5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
`;

const Content = styled.View`
  /* height: 1000px; */
  padding: 20px;
`;

const htmlContent = `
  <h2>This is a title</h2>
  <p>This <strong>is</strong> a <a href="http://designcode.io">link</a></p>
  <img src="https://cl.ly/c0b07504bfec/download/background4.jpg" />
`;
const htmlStyles = `
		* {
			font-family:-apple-system, Roboto;
			margin: 0;
			padding: 0;
			font-size: 150px;
		}
		h2{
			font-size: 40px;
		}
		p {
      margin-top: 20px;
    }
  
    a {
      color: #4775f2;
      font-weight: 600;
      text-decoration: none;
		}
		strong {
      font-weight: 700;
    }
    img {
      width: 100%;
      border-radius: 10px;
      margin-top: 20px;
    }
`;
